<template>
  <div class="wait-detail-container">
    <Breadcrumb>
      <template #bread-name> {{ taskInfo.taskName }} </template>
      <template #bread-right>
        <div
          @click="toCourse"
          class="course-btn hover"
          v-if="taskInfo.courseId"
        >
          查看课程内容
        </div>
      </template>
    </Breadcrumb>
    <div class="content">
      <Task :task-id="taskInfo.taskId" :isPending="true" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import Task from '../components/Task.vue'
import router from '@/router'

const route = useRoute()
const taskInfo = ref({
  taskId: '',
  taskName: '',
  courseId: 0
})

const initData = () => {
  taskInfo.value = {
    taskId: route.query?.taskId,
    taskName: route.query?.taskName,
    courseId: route.query?.courseId
  }
}

const toCourse = () => {
  router.push({
    path: `/question-bank/lesson/preview/${taskInfo.value.courseId}`
  })
}

initData()
</script>

<style lang="less" scoped>
.wait-detail-container {
  .content {
    background-color: #fff;
    margin-top: 20px;
  }
  .course-btn {
    color: #5466e7;
    border-bottom: 1px solid #5466e7;
  }
}
</style>
